import React, { Component } from 'react';
import { PixelRatio, StyleSheet, Text, View, Image } from "react-native";
import { style } from '../../theme/style';
import { GLOBAL } from '../../config/global';
import { PageStatusIndex } from '../../component/page-status/PageStatusIndex';
import { Common } from '../../component/common/Common';


export class AppInfoPage extends Component {
	static navigationOptions = ({ navigation, navigationOptions }) => {
		return {
			headerTitle: '版本说明',
			headerTintColor: style.color.white,
			headerLeft: <Common type="headLeft" onPress={() => { navigation.goBack() }} color='#fff' />,
			headerRight: (<Image style={{ marginLeft: 18 * GLOBAL.SCALE, width: 9 * GLOBAL.SCALE, height: 16 * GLOBAL.SCALE }}
				source={require('../../imgs/goBackEmpty.png')} />),
			headerStyle: {
				elevation: 0,
				backgroundColor: style.color.themeColor,
			},
			headerTitleStyle: {
				flex: 1,
				textAlign: 'center'
			}
		}
	};

	constructor(props) {
		super(props)
	}

	render () {
		const { params } = this.props.navigation.state;
		return (
			<View style={styles.container}>
				{
					params ? (
						<View>
							<View style={styles.containerTitle}>
								<Text style={styles.containerTitleLabel}>版本号：</Text>
								<Text style={styles.containerTitleContent}>{params['versionNo']}</Text>
							</View>
							<View style={styles.containerContent}>
								<Text style={styles.containerContentLabel}>更新内容：</Text>
								{params['content'] && params['content'].map((item, index) => {
									return <Text key={index} style={styles.updateInfoItem}>{index + 1}.{item}</Text>
								})}
							</View>
						</View>
					) : (<PageStatusIndex status='empty' onEmptyPress={() => {
						this.props.navigation.goBack();
					}} />)
				}

			</View >
		)
	}

}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: style.color.white,
		marginTop: 12 * GLOBAL.SCALE
	},
	containerTitle: {
		height: 52 * GLOBAL.SCALE,
		flexDirection: 'row',
		alignItems: 'center',
		borderBottomWidth: 1 / PixelRatio.get(),
		borderStyle: 'solid',
		borderBottomColor: style.color.border,
		marginLeft: 14 * GLOBAL.SCALE,
	},
	containerTitleLabel: {
		color: style.color.dark
	},
	containerTitleContent: {
		fontSize: 13 * GLOBAL.SCALE,
		color: style.color.dark
	},
	containerContent: {
		padding: 14 * GLOBAL.SCALE,
	},
	containerContentLabel: {
		fontSize: 13 * GLOBAL.SCALE,
		color: style.color.dark,
		marginBottom: 17 * GLOBAL.SCALE,
	},
	updateInfoItem: {
		fontSize: 14 * GLOBAL.SCALE,
		color: style.color.dark,
		marginBottom: 8 * GLOBAL.SCALE,
	}
})